{include file="public/header"}
<title>充值</title>
      <style>
          body{
            width:100%;
            height:100%;
            margin:0;
            padding:0;
            background-color: #F7F7F7;
          }
          /*头部*/
          .top{
            height: 60px;
            width: 100%;
            background:rgba(22,26,39,1);
          }
          .top_box{
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            align-items: center;

          }
          .top_name_left{
            width:38px;
            height:38px;
            background:rgba(52,99,230,1);
            border-radius:10px;
            margin-right: 10px;
          }
          .top_name{
            height:60px;
            font-size:24px;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(255,255,255,1);
            line-height:60px;
          }
          .top_name_r{
            width:76px;
            height:30px;
            border-radius:15px;
            border:1px solid rgba(255,255,255,1);
            margin-left:26px;
            align-items: center;
            justify-content: center;
            display: flex;
          }
          .top_name_r img{
            height: 16px;
            width: 16px;
          }
          .top_name_r span{
            height:22px;
            line-height: 22px;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            margin-left: 3px;
          }
          .lii{
            height:22px;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:#84868D;
            line-height:22px;
            margin-right: 24px;
          }
          .top_login{
            margin-left: 36px;
            display: flex;
            align-items: center;
          }
          .top_login img{
            width: 28px;
            height: 28px;
          }
          .top_login span{
            height:22px;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:22px;
            margin-left: 8px;
          }
          .top_marginR{
            margin-right: 16px;
          }
          /*头部*/

          /*footer1样式*/
          .footer{
            width:100%;
            height:130px;
            background:rgba(31,31,31,1);
            display: flex;
            align-items: center;
          }
          .footer_in{
            width: 1210px;
            margin: 0 auto;
            height:18px;
            font-size:13px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:18px;
          }
          /*footer1样式*/
         .bar{
         	width:1200px;
         	height:57px;
         	align-items:center;
         	margin: 0 auto;
         	font-size:12px;
         	color:#999999;
         }
         .right_arrow{
         	width:14px;
         	height:14px;
         	margin-left:6px;
         	margin-right:6px;
         }
         .box{
         	width:1200px;
         	margin: 0 auto;
         	margin-bottom:30px;
         }
         .left{
        	width:150px;
         	background:#FFFFFF;
			box-shadow:0px 4px 10px 0px rgba(0,0,0,0.04);
			border-radius:4px;
			margin-right:20px;
           height: 520px;
         }
         .avatar,.avatar img{
			width:80px;
			height:80px;
			border-radius:50%;
		}
		.avatar{
			margin:20px auto 10px;
		}
		.avatar img{
			object-fit: cover;
		}
		.phone{
			text-align:center;
			font-size:14px;
			color:#333;
			margin-bottom:20px;
		}
		.title{
			font-size:14px;
			color:#333;
			height:40px;
			line-height:40px;
      text-align: left;
      width: 58px;
      padding: 0 46px;
		}
		.hover:hover{
			text-decoration:underline;
			cursor:hand;
			cursor:pointer;
		}
		.blue{
			font-size:14px;
			color:#FFFFFF;
			height:40px;
			line-height:40px;
      text-align: left;
      width: 58px;
      padding: 0 46px;
			background-color:#3463E6;
		}
		.right_tit{
			height:60px;
			line-height:60px;
			padding-left:21px;
			font-size:15px;
			color:#333333;
			border-bottom:1px solid #EDEDED;
		}
		.active{
			color:#3463E6;
			border-bottom:2px solid #3463E6;
			border-radius:2px;
		}
		.right1{
			margin-left:43px;
		}
		.avatar1,.avatar1 img{
			width:120px;
			height:120px;
			border-radius:50%;
		}
		.avatar1{
			position:relative;
			margin:60px auto 60px;
		}
		.avatar1 img{
			object-fit: cover;
		}
		.mengban{
			position:absolute;
			top:0;
			left:0;
			width:120px;
			height:120px;
			text-align:center;
			line-height:120px;
			border-radius:50%;
			background:rgba(0,0,0,0);
			font-size:14px;
			color:#FFFFFF;
			opacity:0;
		}
		.mengban:hover{
			background:rgba(0,0,0,0.4);
			opacity:1;
		}
		.cName{
			line-height:40px;
			font-size:14px;
			color:#999;
		}
		input[type='text']{
            -webkit-appearance: none;
            outline: none;
            background: transparent;
            width:236px;
			height:40px;
            color: #666;
            font-size: 14px;
            margin: 0;
            height: 40px;
            padding-left:10px;
            padding-right:10px;
            border:1px solid #D0D0D0;
			border-radius:4px;
			margin-left:16px;
        }

        input::-webkit-input-placeholder {
            color: #666;
            font-size: 14px;
        }
        .button{
        	width:114px;
			height:38px;
			color: #FFFFFF;
            font-size: 14px;
            text-align:center;
			line-height:38px;
			border-radius:4px;
			background:#3463E6;
			margin:0 auto;
			margin-top:20px;
        }

/*right 内容*/
      .right{
       width:1030px;
       /*height:470px;*/
      }
      .right_top{
        margin-bottom: 20px;
      }
      .right_top_con{
        width:505px;
        height:210px;
        background:rgba(255,255,255,1);
        box-shadow:0px 4px 11px 0px rgba(0,0,0,0.04);
        border-radius:4px;
      }
      .right_top_conname{
        height:20px;
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(89,89,89,1);
        line-height:20px;
        margin-top: 40px;
        margin-left: 30px;
      }
      .right_top_connum{
        height:36px;
        font-size:30px;
        font-family:Helvetica-Bold;
        font-weight:bold;
        color:rgba(51,51,51,1);
        line-height:36px;
        margin-top: 10px;
        margin-left: 30px;
      }
      .right_top_con_bom{
        margin-top: 40px;
        margin-right: 30px;
      }
      .right_top_con_bom1{
        width:80px;
        height:32px;
        border-radius:4px;
        border:1px solid rgba(52,99,230,1);
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(52,99,230,1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
      }
      .right_top_con_bom2{
        width:80px;
        height:32px;
        background:rgba(52,99,230,1);
        border-radius:4px;
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .right_top_con:first-child{
        margin-right: 20px;
      }

      .right_content{
        width:1030px;
        background:rgba(255,255,255,1);
        box-shadow:0px 4px 11px 0px rgba(0,0,0,0.04);
        border-radius:4px;
      }
      .right_content_top{
        height: 50px;
        border-bottom: 1px solid #EDEDED;
        padding-left: 30px;
        font-size:16px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(0,0,0,0.85);
        line-height:50px;
      }
      .right_content_record{
        margin: 0 34px 0 30px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #EDEDED;
        /*width:*/
      }
      .right_content_record:last-child{
        border-bottom: none;
      }
      .right_content_record_l{
        margin: 20px 0;
      }
      .right_content_record_ln{
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(51,51,51,1);
        margin-bottom: 10px;
      }
      .right_content_record_lt{
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(140,140,140,1);
      }
      .right_content_record_r{
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(51,51,51,1);
      }
/*right 内容*/


      </style>
  <body>

  <div class="bar flex-wrap">
    置家优选 <img src="__IMG__/right_arrow.png" class="right_arrow" />个人中心
  </div>
	<div class="box flex-wrap">
      {include file="public/body"}
		<div class="flex-con right">
      <div class="right_top flex-wrap">
        <div class="right_top_con">
          <div class="right_top_conname">
            刷新包剩余(个)
          </div>
          <div class="right_top_connum">
            {$user.user_myfresh}
          </div>
          <div class="right_top_con_bom flex-wrap">
            <div class="flex-con"></div>
            <div class="right_top_con_bom1" onclick="location.href='{:url('User/member')}'">
              使用
            </div>
            <div class="right_top_con_bom2" style="cursor: pointer;" onclick="location.href='/home/User/buytopfresh?which=3';">
              购买
            </div>
          </div>
        </div>
        <div class="right_top_con">
          <div class="right_top_conname">
            置顶包剩余(个)
          </div>
          <div class="right_top_connum">
            {$user.user_mytop}
          </div>
          <div class="right_top_con_bom flex-wrap">
            <div class="flex-con"></div>
            <div class="right_top_con_bom1" onclick="location.href='{:url('User/member')}'">
              使用
            </div>
            <div class="right_top_con_bom2" style="cursor: pointer;" onclick="location.href='/home/User/buytopfresh?which=2';">
              购买
            </div>
          </div>
        </div>
      </div>



      <div class="right_content">
        <div class="right_content_top">
          购买记录
        </div>
        {volist name='jilu' id='j'}
        <div class="right_content_record flex-wrap">
          <div class="right_content_record_l">
            <div class="right_content_record_ln">
              {if $j.order_type == 2}购买置顶包{/if}
              {if $j.order_type == 3}购买刷新包{/if}
            </div>
            <div class="right_content_record_lt">
              {$j.order_date}
            </div>
          </div>
          <div class="flex-con"></div>
          <div class="right_content_record_r">
            {$j.order_money}元
          </div>
        </div>
        {/volist}
        <ul class="pagination flex-con" style="display: flex;justify-content: flex-end;">
          {$jilu->render()}
        </ul>
      </div>

		</div>
	</div>

    {include file="public/foot1"}
  </body>
  </html>

<script type="text/javascript">

</script>